---
title: Spinner
description: A feedback component for indicating loading or processing states.
metaDescription: Spinner component for React and Solid.js indicating loading and processing states with animated spinners. Customizable sizes and colors for loading indicators.
category: feedback
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/spinner.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Spinner } from '@/components/ui'
```

```tsx
<Spinner />
```

## Examples

### Sizes

Use the `size` prop to change the size of the spinner.

<ComponentExample name="sizes" />

### Colors

Use the `colorPalette` prop to change the color scheme of the spinner.

<ComponentExample name="colors" />

### Track Color

Use the `--spinner-track-color` variable to change the color of the spinner's track.

<ComponentExample name="track-color" />

### Speed

Use the `animationDuration` prop to change the speed of the spinner.

<ComponentExample name="speed" />

### Thickness

Use the `borderWidth` prop to change the thickness of the spinner.

<ComponentExample name="thickness" />

### Label

Compose the spinner with a label to provide additional context.

<ComponentExample name="label" />

## Props

<PropsTable />